/**
 * Created by Administrator on 2017/9/17.
 */
import React from 'react';
import List from "./List";
import Input from "./Input";

class ToDoApp extends React.Component {

    constructor(props){
        super(props);
    }

    /*componentWillMount(){
        this.setState({
            list : [
                {item:'thing1',done:false},
                {item:'thing2',done:false},
                {item:'thing3',done:false}
            ],
            newToDo : 'test'
        });
    }*/

    /*onInputChange = (event)=> {
        this.setState({
            newToDo: event.target.value
        });
    }*/

    /*onInputSubmit = (event) =>{
        event.preventDefault();
        this.setState((previousState)=>({
            list: [...previousState.list,{item:previousState.newTodo,done:false}],
            newToDo: ''
        }));
    }*/

    /*itemOnClick = (i) => {
        this.setState((previewsState)=>({
            list: [
                ...previewsState.list.slice(0,i),
                Object.assign({},previewsState.list[i],{done: !previewsState.list[i].done}),
                ...previewsState.list.slice(i+1)
            ]
        }));
    }*/

    /*deleteItemClick = (i) => {
        this.setState((previewsState)=>({
            list: [
                ...previewsState.list.slice(0,i),
                ...previewsState.list.slice(i+1)
            ]
        }));
    }*/

    render(){

        // console.log(this.props);
        return(
            <div className="row">
                <div className="col-md-10 col-md-offset-1">
                    <div className="panel panel-default">
                        <div className="panel-body">
                            <h1>My To Do App</h1>
                            <hr/>
                            <List
                                listItems={this.props.toDoApp.list}
                                onClick={this.props.itemChange}
                                deleteItemClick={this.props.deleteItem}/>
                            <hr/>
                            <Input
                                value={this.props.toDoApp.newToDo}
                                onChange={this.props.inputChange}
                                onInputSubmit={this.props.addItem}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default ToDoApp;